<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    :cancelButtonProps="{ style: { display: 'none' } }"
    :width="1120"
    okText="关闭"
    @cancel="handleCancel"
    @ok="handleOk"
    title="房源列表"
    destroyOnClose
  >
    <a-spin :spinning="spinning">
      <a-form class="search-form m-b-24" :form="form" layout="inline">
        <a-form-item label="楼层">
          <a-input v-decorator="['Floor']" placeholder="请输入附号"></a-input>
        </a-form-item>
        <a-form-item label="附号">
          <a-input v-decorator="['Number']" placeholder="请输入附号"></a-input>
        </a-form-item>
        <a-form-item label="房源状态">
          <a-select v-decorator="['Mode']" placeholder="请选择房源状态" allowClear :options="stateList"> </a-select>
        </a-form-item>
        <a-form-item>
          <y-button type="primary" @click="handleSearch">查询</y-button>
          <y-button @click="handleReset">重置</y-button>
        </a-form-item>
      </a-form>
      <s-table rowKey="ID" ref="table" :columns="columns" :data="loadData">
        <y-button icon="plus" type="primary" @click="handleAddHouse" slot="tabAction">添加房间</y-button>
        <span slot="index" slot-scope="text, record, index">{{ index + 1 }} </span>
        <a-tag :color="colorMode(text)" slot="Mode" slot-scope="text">
          {{ text }}
        </a-tag>
        <div slot="action" slot-scope="text, record">
          <y-button type="link" @click="handleDetail(record)">查看</y-button>
          <y-button type="link" class="text-warning" @click="handleEdit(record)">修改</y-button>
          <a-popconfirm title="确认删除此房源？" placement="left" @confirm="handleDelete(record)">
            <y-button type="link" class="text-error">删除</y-button>
          </a-popconfirm>
        </div>
      </s-table>
    </a-spin>
    <house-detail :visible.sync="visibleDetail" :houseID="houseItem.ID"></house-detail>
    <house-item-form
      :visible.sync="visibleForm"
      :houseID="houseItem.ID"
      :building="data"
      @success="tableRefresh"
    ></house-item-form>
  </a-modal>
</template>

<script>
import { STable } from '@/components'
import houseDetail from '@/components/houseDetail'
import houseItemForm from './houseItemForm.vue'
import { getHouseTableList, postHouseElement } from '@/api/followUpManagement'
import { getHouseTypeColor } from '@/api/common'
export default {
  components: {
    STable,
    houseDetail,
    houseItemForm
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchData()
      }
    }
  },
  data () {
    return {
      spinning: false,
      visibleDetail: false,
      visibleForm: false,
      houseItem: {},
      form: this.$form.createForm(this, { name: 'houseTable' }),
      queryParam: {
        strContent: {}
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          width: '80px',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '房间号',
          align: 'center',
          dataIndex: 'Number',
          customRender: (text, record) => `${record.Floor}-${text}`
        },
        {
          title: '房屋结构',
          align: 'center',
          dataIndex: 'fwjg'
        },
        {
          title: '面积（㎡）',
          align: 'center',
          dataIndex: 'Area'
        },
        {
          title: '房屋状态',
          align: 'center',
          dataIndex: 'Mode',
          scopedSlots: { customRender: 'Mode' }
        },
        {
          title: '操作',
          align: 'center',
          width: '160px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign(
          {
            ID: this.data.ID
          },
          parameter,
          this.queryParam
        )
        return getHouseTableList(requestParameters).then((res) => res)
      },
      stateList: []
    }
  },
  methods: {
    fetchData () {
      this.spinning = true
      getHouseTypeColor({
        PmKey: 'HoueTypeColor'
      })
        .then((res) => {
          this.stateList = res.map((e) => {
            return {
              ID: e.ID,
              value: e.PMNAME,
              label: e.PMNAME,
              color: e.PMCOLOR
            }
          })
        })
        .finally(() => {
          this.spinning = false
        })
    },
    colorMode (label) {
      const element = this.stateList.find((e) => e.label === label)
      if (element) {
        return element.color
      } else {
        return '#ffc53d'
      }
    },
    handleSearch () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.queryParam.strContent = values
          this.tableRefresh(true)
        }
      })
    },
    handleReset () {
      this.queryParam.strContent = {}
      this.tableRefresh(true)
    },
    tableRefresh (refresh) {
      this.$refs.table.refresh(refresh)
    },
    handleAddHouse () {
      this.houseItem = {}
      this.visibleForm = true
    },
    handleEdit (record) {
      this.houseItem = record
      this.visibleForm = true
    },
    handleDetail (record) {
      this.houseItem = record
      this.visibleDetail = true
    },
    handleDelete (record) {
      this.$loading.show({
        tip: '删除房源中，请稍后...'
      })
      postHouseElement({
        State: 'delete',
        houseresources: {
          ID: record.ID
        }
      })
        .then((res) => {
          this.$message.success('房源删除成功！')
          this.tableRefresh(false)
        })
        .finally(() => {
          this.$loading.hide()
        })
    },
    close () {
      this.form.resetFields()
      this.queryParam.strContent = {}
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
    },
    handleCancel () {
      this.close()
      this.hanldeAfterClose()
    },
    handleOk () {
      this.close()
    },
    hanldeAfterClose () {}
  }
}
</script>
<style lang="less" scoped>
.search-form {
  /deep/ .ant-select {
    width: 174px;
  }
}
</style>
